<template>
  <div class="reset">
    <a-col :span="24">
      <div class="reset_passwold">
        <span>重置密码</span>
        <span class="back_login" @click="onBackLogin">返回登录</span>
      </div>
      <a-divider></a-divider>
    </a-col>
    <a-col :span="24">
      <div class="reset_form">
        <a-form ref="formLogin" :form="form" :layout="layout" :model="form">
          <a-form-item has-feedback>
            <span>登陆手机号</span>
            <a-input
                v-decorator="['mobile']"
                placeholder="请输入登录手机号"
                size="large"
                style="width: 70%;margin-left: 16px;"
                type="text">
            </a-input>
          </a-form-item>

          <a-form-item has-feedback>
            <span>密码</span>
            <a-input v-decorator="['password']" :type="passwordType" placeholder="请输入新密码" size="large"
                     style="width: 70%;margin-left: 16px"/>
          </a-form-item>


          <a-form-item has-feedback>
            <span>确认新密码</span>
            <a-input v-decorator="['newPassword']" :type="passwordType" placeholder="请输入新密码"
                     size="large" style="width: 70%;margin-left: 16px"/>
          </a-form-item>

          <a-form-item>
            <span>验证码</span>
            <a-input v-decorator="['inputCode']" placeholder="请输入验证码" size="large"
                     style="width: 42%;margin-left: 16px;"/>
            <span class="reset_send" @click="getCaptcha">{{ timeText }}</span>
          </a-form-item>

          <a-button
              :disabled="resetBtn"
              :loading="resetBtn"
              class="reset-button"
              htmlType="submit"
              type="primary"
              @click.stop.prevent="handleSubmit">确定
          </a-button>
        </a-form>


      </div>
    </a-col>
  </div>
</template>

<script>
import {mixinDevice} from '@/utils/mixin.js'
import {getAction, postAction} from '@/api/manage'

export default {
  mixins: [mixinDevice],
  data() {
    return {
      layout: 'horizontal',
      form: this.$form.createForm(this),
      timeText: "获取验证码",
      state: {
        time: 60,
        enterButton: false,
        passwordLevel: 0,
        passwordLevelChecked: false,
        percent: 10,
        progressColor: '#FF0000'
      },
      resetBtn: false,
      tipMsg: '',
      disabledFlag: false,
      passwordType: 'password',
      enterStyle: 'width:130px;height:40px;color: #28B7B9;'
    }
  },

  methods: {

    changePassward() {
      this.passwordType = this.passwordType === 'password' ? 'text' : 'password';
    },
    handlePasswordLevel(value) {

      let level = 0
      let reg = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./]).{8,}$/;
      if (!reg.test(value)) {

        return "F1";
      }
      // 判断这个字符串中有没有数字
      if (/[0-9]/.test(value)) {
        level++
      }
      // 判断字符串中有没有字母
      if (/[a-zA-Z]/.test(value)) {
        level++
      }
      // 判断字符串中有没有特殊符号
      if (/[^0-9a-zA-Z_]/.test(value)) {
        level++
      }
      this.state.passwordLevel = level
      this.state.percent = level * 30
      if (level >= 2) {
        if (level >= 3) {
          this.state.percent = 100
        }
      } else {
        if (level === 0) {
          this.state.percent = 10
        }

        return "F2";
      }
    },

    handlePasswordInputClick() {
      if (!this.isMobile()) {
        this.state.passwordLevelChecked = true
        return;
      }
      this.state.passwordLevelChecked = false
    },

    handleSubmit() {

      var password = this.form.getFieldValue('password');
      var mobile = this.form.getFieldValue('mobile');
      var inputCode = this.form.getFieldValue('inputCode');

      var newPassword = this.form.getFieldValue('newPassword');

      if (!mobile) {

        this.$message.error({
          content: '提示：请正确输入您的手机号',
          icon: <a-icon type="exclamation-circle" theme="filled" style="color: red"/>
        });
        return;
      }

      if (!inputCode) {

        this.$message.error({
          content: '提示：请输入验证码',
          icon: <a-icon type="exclamation-circle" theme="filled" style="color: red"/>
        });
        return;
      }


      if (!password) {
        this.$message.error({
          content: '提示：请输入新的密码',
          icon: <a-icon type="exclamation-circle" theme="filled" style="color: red"/>
        });
        return;

      }

      if (!(password.length > 5 && password.length < 21)) {
        this.$message.error({
          content: '提示：请输入6-20位密码',
          icon: <a-icon type="exclamation-circle" theme="filled" style="color: red"/>
        });
        return;
      }

      if (password != newPassword) {
        this.$message.error({
          content: '提示：密码不一致',
          icon: <a-icon type="exclamation-circle" theme="filled" style="color: red"/>
        });
        return;
      }
      // var returnVal = this.handlePasswordLevel(password);
      // if(returnVal =="F1"){
      //      this.$message.error({content:'提示：密码由8位数字、大小写字母和特殊符号组成',icon:<a-icon type="exclamation-circle" theme="filled" style="color: red"/>});
      //      return;
      // }
      // if(returnVal=="F2"){

      //     this.$message.error({content:'提示：密码强度不够',icon:<a-icon type="exclamation-circle" theme="filled" style="color: red"/>});
      //     return;
      // }


      this.form.validateFields((err, values) => {
        if (!err) {
          var findpwd = {
            username: '',
            password: values.password,
            smscode: values.inputCode,
            phone: values.mobile

          };
          getAction("/sys/user/passwordChange2", findpwd).then((res) => {
            if (!res.success) {
              this.findPwdFailed(res.message);
            } else {
              this.$emit("goback", true)
              // this.$router.push({name: 'findPwdResult', params: {...values}});
            }
          })
        }
      })
    },

    getCaptcha(e) {

      var mobile = this.form.getFieldValue('mobile');
      if (!mobile) {
        this.$message.error({
          content: '提示：手机号不能为空',
          icon: <a-icon type="exclamation-circle" theme="filled" style="color: red"/>
        });
        return;
      }


      getAction("/assess/yxUser/queryByphone", {'phone': mobile}).then((res) => {

        if (!res.success) {
          this.$message.error({
            content: '提示：' + err.message,
            icon: <a-icon type="exclamation-circle" theme="filled" style="color: red"/>
          })
        } else {

          if (res.result > 0) {


            let that = this
            this.form.validateFields(['mobile'], {force: true}, (err, values) => {
                  if (!err) {
                    this.state.enterButton = true;
                    let interval = window.setInterval(() => {
                      if (that.state.time-- <= 0) {
                        that.state.time = 60;
                        that.state.enterButton = false;
                        window.clearInterval(interval);
                        that.timeText = "获取验证码";
                        this.disabledFlag = false;
                        this.enterStyle = 'width:130px;height:40px;color: #28B7B9;';
                      } else {
                        that.timeText = that.state.time + "s后重新发送";
                        this.disabledFlag = true;
                        this.enterStyle = 'width:130px;height:40px;color: #B8BECC;';
                      }
                    }, 1000);
                    const hide = this.$message.loading('验证码发送中..', 0);
                    const params = {
                      mobile: values.mobile,
                      smsmode: "2"
                    };
                    postAction("/sys/sms", params).then((res) => {
                      if (!res.success) {
                        this.findPwdFailed(res.message);
                        setTimeout(hide, 0);
                      }
                      setTimeout(hide, 500);
                    }).catch(err => {
                      setTimeout(hide, 1);
                      clearInterval(interval);
                      that.state.time = 60;
                      that.state.enterButton = false;
                      this.requestFailed(err);
                    });
                  }
                }
            );


          } else {

            this.$message.error({
              content: '提示：手机号暂未注册葆龄健康，请先注册',
              icon: <a-icon type="exclamation-circle" theme="filled" style="color: red"/>
            })
          }
        }

      }).catch(err => {

        this.$message.error({
          content: '提示：' + err.message,
          icon: <a-icon type="exclamation-circle" theme="filled" style="color: red"/>
        });

      });


    },
    findPwdFailed(message) {


      this.$message.error({
        content: "提示：" + message,
        icon: <a-icon type="exclamation-circle" theme="filled" style="color: red"/>
      });

    },
    requestFailed(err) {

      this.$message.error({
        content: "提示：" + ((err.response || {}).data || {}).message || "请求出现错误，请稍后再试",
        icon: <a-icon type="exclamation-circle" theme="filled" style="color: red"/>
      });

      this.registerBtn = false;
    },
    onBackLogin() {
      this.$emit("goback", true)
    }

  },

}
</script>

<style lang="less" scoped>
.reset {
  padding: 40px 40px 0 40px;

  .ant-divider-horizontal {
    margin: 14px 0 39px 0;
  }

  .reset_passwold {
    display: flex;
    justify-content: space-between;
    border-left: 4px solid #27B2B0;
    border-radius: 2px;
    padding-left: 5px;
    font-size: 18px;
    color: #333;
    height: 20px;
    line-height: 20px;

    .back_login {
      font-size: 14px;
      color: #27B2B0;

      &:hover {
        cursor: pointer;
      }
    }
  }

  .reset_form {
    span {
      display: inline-block;
      width: 88px;
      min-width: 88px;
      text-align: right;
      color: #333;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
    }

    .ant-form-item {
      margin-bottom: 20px;
    }

    .reset_send {
      border: 1px solid #27B2B0;
      color: #27B2B0;
      font-size: 14px;
      width: 110px;
      height: 32px;
      line-height: 32px;
      border-radius: 2px;
      margin-left: 16px;
      text-align: center;

      &:hover {
        cursor: pointer;
      }
    }
  }

  .ant-form-item {
    margin-bottom: 0;
  }

  .ant-btn {
    width: 320px;
    height: 40px;
    color: #fff;
    background: #27B2B0;
    box-shadow: 0px 4px 8px 0px rgba(39, 178, 176, 0.24);
    border-radius: 2px;
    margin: 16px 76px 0 103px;
  }

  .ant-btn:hover,
  .ant-btn:focus {
    color: #fff;
    background: #27B2B0;
    border-color: #27B2B0;
  }
}
</style>
